<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>微店</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../css/index.css">
		<link rel="stylesheet" type="text/css" href="../js/dropload/dropload.css">
		<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/layer/mobile/need/layer.css">
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/filter.js"></script>
		<script type="text/javascript" src="../js/index.js"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="../js/layer/mobile/layer.js"></script>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../js/mint/mint.min.css">
		<!-- 引入组件库 -->
		<script src="../js/mint/mint.min.js"></script>

	</head>

	<body style="padding-bottom: 54px;">
		<div id="shopHome">
			<div class="filter-bar">
				<div class="filter-nav clearfix">
					<span class="filter-nav-list on" id="brandNav">{{(brandName+seriesName+modelName) || '品牌'}}</span>
					<span class="filter-nav-list" id="priceNav">价格</span>
					<span class="filter-nav-list" id="modelNav">车型</span>
					<span class="filter-nav-list" id="sortNav">排序</span>
				</div>
				<div class="filter-box">
					<div class="filter-box-list" style="display: block;">
						<span onclick="searchBland('','','','','','')" class="brand-list" style="background-image: url(../images/none.svg);background-size: 24px;background-position: 50% 8px;">不限品牌</span>
						<span onclick="searchBland(29,'','','奔驰','','')" class="brand-list" style="background-image: url(../images/benz.png)">奔驰</span>
						<span onclick="searchBland(118,'','','路虎','','')" class="brand-list" style="background-image: url(../images/luhu.png)">路虎</span>
						<span onclick="searchBland(27,'','','保时捷','','')" class="brand-list" style="background-image: url(../images/porsche.png)">保时捷</span>
						<span onclick="searchBland(36,'','','别克','','')" class="brand-list" style="background-image: url(../images/buick.png)">别克</span>
						<span onclick="searchBland(20,'','','奥迪','','')" class="brand-list" style="background-image: url(../images/audi.png)">奥迪</span>
						<span onclick="searchBland(25,'','','宝马','','')" class="brand-list" style="background-image: url(../images/bmw.png)">宝马</span>
						<!--<span onclick="openBrandList()" class="brand-list" style="background-image: url(../images/more.svg);background-size: 24px;background-position: 50% 8px;">更多</span>-->
						<span @click="brandShow = true" class="brand-list" style="background-image: url(../images/more.svg);background-size: 24px;background-position: 50% 8px;">更多</span>
					</div>
					<div class="filter-box-list">
						<span class="price-list" onclick="searchPrice('','','价格')">不限价格</span>
						<span class="price-list" onclick="searchPrice(0,10,'10万以内')">10万以内</span>
						<!-- <span class="price-list" onclick="searchPrice(10,20)">10-20万</span> -->
						<span class="price-list" onclick="searchPrice(10,30,'10-30万')">10-30万</span>
						<span class="price-list" onclick="searchPrice(30,50,'30-50万')">30-50万</span>
						<span class="price-list" onclick="searchPrice(50,100,'50-100万')">50-100万</span>
						<span class="price-list" onclick="searchPrice(100,10000,'100万以上')">100万以上</span>
					</div>
					<div class="filter-box-list">
						<span class="modelType-list1" onclick="searchModelType('','车型')">不限车型</span>
						<span class="modelType-list1" onclick="searchModelType(1,'微型车')">微型车</span>
						<span class="modelType-list1" onclick="searchModelType(2,'小型车')">小型车</span>
						<span class="modelType-list1" onclick="searchModelType(3,'紧凑型车')">紧凑型车</span>
						<span class="modelType-list1" onclick="searchModelType(4,'中型车')">中型车</span>
						<span class="modelType-list1" onclick="searchModelType(5,'中大型车')">中大型车</span>
						<span class="modelType-list1" onclick="searchModelType(6,'大型车')">大型车</span>
						<span class="modelType-list1" onclick="searchModelType(7,'小型SUV')">小型SUV</span>
						<span class="modelType-list1" onclick="searchModelType(8,'紧凑型SUV')">紧凑型SUV</span>
						<span class="modelType-list1" onclick="searchModelType(9,'中型SUV')">中型SUV</span>
						<span class="modelType-list1" onclick="searchModelType(10,'中大型SUV')">中大型SUV</span>
						<span class="modelType-list1" onclick="searchModelType(11,'大型SUV')">大型SUV</span>
						<span class="modelType-list1" onclick="searchModelType(12,'MPV')">MPV</span>
						<span class="modelType-list1" onclick="searchModelType(13,'跑车')">跑车</span>
						<span class="modelType-list1" onclick="searchModelType(14,'微面')">微面</span>
						<span class="modelType-list1" onclick="searchModelType(15,'微卡')">微卡</span>
						<span class="modelType-list1" onclick="searchModelType(16,'轻客')">轻客</span>
						<span class="modelType-list1" onclick="searchModelType(17,'皮卡')">皮卡</span>
						<span class="modelType-list1" onclick="searchModelType(20,'其他')">其他</span>
					</div>
					<div class="filter-box-list">
						<span class="price-list" data-index="0" onclick="filterSort(0,'最新发布')">最新发布</span>
						<span class="price-list" data-index="1" onclick="filterSort(1,'价格最低')">价格最低</span>
						<span class="price-list" data-index="2" onclick="filterSort(2,'价格最高')">价格最高</span>
						<span class="price-list" data-index="3" onclick="filterSort(3,'车龄最短')">车龄最短</span>
						<span class="price-list" data-index="4" onclick="filterSort(4,'里程最少')">里程最少</span>
						<span class="price-list" data-index="5" onclick="filterSort(5,'最早发布')">最早发布</span>
					</div>
				</div>
			</div>
			<div class="panel content">
				<div class="panel-title">在售车辆<span class="more-car">本店共有{{carsTotal}}辆</span></div>
				<div>
					<a v-bind:href="'cars_detial.html' +params+'&carId='+ car.carId+'&os='+os" v-for="car in carList">
						<div class="panel-list opacity">
							<div class="cars-img">
								<img v-bind:src="imgUrl + car.carImageUrl+'.r_240xh_160'" onerror="javascript:this.src='../images/default.png'">
							</div>
							<div class="cars-info">
								<h4>{{car.carTitle}}</h4>
								<div class="car-age"><span v-if="car.carLicenceState == 1">{{car.carLicenceDate | filterGetDate}}</span><span v-if="car.carLicenceState == 2">未上牌</span><span v-if="car.carLicenceState == 3">新车</span>/{{car.carMileage}}万公里</div>
								<div class="car-price" v-if="car.carRetailPrice && car.carRetailPrice > 0">
									<span class="price-number">{{car.carRetailPrice}}</span> 万
								</div>
								<div class="car-price" v-else="car.carRetailPrice && car.carRetailPrice>=0">
									<span class="price-number">面议</span>
								</div>
							</div>
						</div>
					</a>
				</div>

			</div>
			<div class="footer">
				<a v-bind:href="'home.html'+params" class="footer-nav footer-home on">首页</a>
				<!-- <a v-bind:href="'cars_list.html'+params" class="footer-nav footer-cars">买车</a> -->
				<a v-bind:href="'contact.html'+params" class="footer-nav footer-contact">联系</a>
			</div>
			<transition name="bottom" >
				<div class="brandShow" v-if="brandShow">					
					<mt-index-list>
						<div class="model-name" @click="brandShow = false" :onclick="'searchBland(\'\',\'\',\'\',\'\',\'\',\'\')'">不限品牌</div>
						<mt-index-section :index="item.initial" v-for="item in arr" class="brandListOne">
							<div class="brand-name" v-for="brandItem in item.brandInfo" @click="brandShow = false" :onclick="'openSeries('+brandItem.brandId+',\''+brandItem.brandName+'\')'" >
								<i class="brand-logo" :style="'background-image:url('+brandItem.brandLogo+')'"></i> {{brandItem.brandName}}
							</div>
						</mt-index-section>
					</mt-index-list>					
				</div>
			</transition>

			<div id="brandList" style="display: none;">
				<div class="brandListOne">
					<div class="model-name" :onclick="'searchBland(\'\',\'\',\'\',\'\',\'\',\'\')'">不限品牌</div>
					<div v-for="item in brandList">
						<p class="brand-initial">{{item.initial}}</p>
						<div class="brand-name" v-for="child in item.brandInfo" :onclick="'openSeries('+child.brandId+',\''+child.brandName+'\')'"><i :style="'background-image:url('+child.brandLogo+')'"></i>{{child.brandName}}</div>
					</div>
				</div>

			</div>
			<div id="seriesList" style="display: none">
				<div class="model-name" :onclick="'searchBland('+brandId+',\'\',\'\',\''+brandName+'\',\'\',\'\')'">不限车系</div>
				<div class="model-name" v-for="item in seriesList" :onclick="'openModel('+item.seriesId+',\''+item.seriesName+'\')'">
					</i>{{item.seriesName}}</div>
			</div>
			<div id="modelList" style="display: none">
				<div class="model-name" :onclick="'searchBland('+brandId+','+seriesId+',\'\',\''+brandName+'\',\''+seriesName+'\',\'\')'">不限车型</div>
				<div class="model-name" v-for="item in modelList" :onclick="'searchBland('+brandId+','+seriesId+','+item.modelId+',\''+brandName+'\',\''+seriesName+'\',\''+item.modelName+'\')'">{{item.modelName}}</div>
			</div>
		</div>

	</body>
	<style type="text/css">
		.brandShow{ position: fixed; z-index: 999; width: 100%; height: 100%; top: 0; left: 0;-webkit-overflow-scrolling: touch;}
		.bottom-enter-active,
		.bottom-leave-active {
			transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out ;
		}
		.bottom-enter,
		.bottom-leave-to {
			transform: translateY(100%);
			-webkit-transform: translateY(100%);
		}
		.mint-indexlist{ height: 100%;}
		.mint-indexlist-content{ height: 100% !important;}
		.model-name,
		.brand-name{ font-size: 14px;}
		.brand-name i { }
	</style>
	<script src="../js/dropload/dropload.min.js"></script>
	<script type="text/javascript">
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
		var wxTitle = "启辕微店";
		var wxDesc = "欢迎光临启辕汽车！";
		var wxImgUrl = "";
		var wxUrl = window.location.href;
		var shopHome = new Vue({
			el: '#shopHome',
			data() {
				return {
					res: {},
					arr: [],
					carList: [],
					brandList: [],
					brandName: '',
					seriesName: '',
					modelName: '',
					seriesList: [],
					modelList: [],
					brandIndex: '',
					carsTotal: 0,
					shopInfo: {},
					imgUrl: imgUrl,
					marketId: marketId,
					shopId: shopId,
					params: '?marketId=' + marketId + '&shopId=' + shopId + '&imgUrl=' + imgUrl + '&customerShopId=' + customerShopId,
					brandId: '',
					seriesId: '',
					modelId: '',
					startPrice: '',
					endPrice: '',
					modelTpyeId: '',
					srotName: '',
					srotMode: '',
					pageSize: 5,
					pageIndex: 0,
					os: os,
					brandShow: false,
				}
			},
			methods: {  
				brandItem(index) {
					this.brandIndex = index
				}
			},
			mounted() {
				var _this = this
				$.get(defaultUrl + '/controller/getGroupBrand')
					.then(function(res) {

						_this.arr = JSON.parse(res).result
						console.log(_this.arr)
					});

			}
		});

		function brandItem(index) {

			console.log(shopHome)
		}
		$('.filter-nav-list').click(function() {
			$(this).addClass('on').siblings().removeClass("on");
			$('.filter-box-list').eq($(this).index()).show().siblings().hide();
		});

		var os = GetQueryString('os') || false;

		$.ajax({
			type: "get", //data 传送数据类型。post 传递
			dataType: 'json', // 返回数据的数据类型json
			url: defaultUrl + "/wx-web/controller/wx/getShareSign", // yii 控制器/方法
			cache: false,
			data: {
				'url': wxUrl,
				'marketId': marketId
			}, //传送的数据
			error: function() {
				alert("数据传输错误");
			},
			success: function(data) {
				console.log(data);
				if(data.code != 1) {
					return false
				}
				wxUrl = window.location.origin + '/wx-web/controller/wx/toWxOpenOauth2?action=shopHome&state=' + shopId + '&marketId=' + marketId + '&appId=' + data.result.appId;
				wxTitle = data.result.marketShortName;
				wxDesc = '欢迎光临' + data.result.marketShortName + '微店'
				wxImgUrl = imgUrl + data.result.wxLogo;
				callJS(os);
				setWxConfig(data.result);

			}
		});
		// if (shopId == '') {
		// $.ajax({
		//   type: "get",      //data 传送数据类型。post 传递
		//   dataType: 'json',  // 返回数据的数据类型json
		//   url: defaultUrl+"/controller/getMarketList",  // yii 控制器/方法
		//   cache: false, 
		//   data: {'marketId': marketId},  //传送的数据     
		//   error:function(){
		//     alert("数据传输错误");
		//   },success: function (data) {
		//     console.log(data);
		//     if (data.code != 1) {
		//       return false
		//     }
		//     shopHome.shopInfo = data.result[0];
		//     // if (marketId == '1') {
		//     //   wxTitle = '启辕微店';
		//     //   wxDesc = '欢迎光临启辕汽车！';
		//     //   wxImgUrl = window.location.origin+'/mshop/images/logo.jpg';
		//     // }else{
		//     //   wxTitle = shopHome.shopInfo.marketName || '启辕微店';
		//     //   wxDesc = shopHome.shopInfo.marketAddress || '欢迎光临启辕汽车！';
		//     //   wxImgUrl = window.location.origin+'/mshop/images/logo.jpg';
		//     // }

		//   } 
		// });
		// }
		// else{
		//   $.ajax({
		//     type: "get",      //data 传送数据类型。post 传递
		//     dataType: 'json',  // 返回数据的数据类型json
		//     url: defaultUrl+"/controller/getShopList",  // yii 控制器/方法
		//     cache: false, 
		//     data: {'shopId': shopId},  //传送的数据     
		//     error:function(){
		//       alert("数据传输错误");
		//     },success: function (data) {
		//       console.log(data);
		//       if (data.code != 1) {
		//         return false
		//       }
		//       shopHome.shopInfo = data.result[0];
		//       wxTitle = shopHome.shopInfo.shopName || '启辕微店';
		//       wxDesc = shopHome.shopInfo.shopAddress || '欢迎光临启辕汽车！';
		//       wxImgUrl = window.location.origin+'/mshop/images/logo.jpg';
		//       callJS(os);
		//       $.ajax({
		//         type: "get",      //data 传送数据类型。post 传递
		//         dataType: 'json',  // 返回数据的数据类型json
		//         url: defaultUrl+"/wx-web/controller/wx/getShareSign",  // yii 控制器/方法
		//         cache: false,      
		//         data: {'url':wxUrl,'marketId':marketId},  //传送的数据
		//         error:function(){
		//            alert("数据传输错误");
		//         },success: function (data) {
		//           console.log(data);
		//            if (data.code != 1) {
		//             return false
		//            }
		//            wxUrl = window.location.origin + '/wx-web/controller/wx/toWxOpenOauth2?action=shopHome&state='+shopId+'&marketId='+marketId+'&appId='+data.result.appId;
		//            setWxConfig(data.result);
		//         }
		//       });

		//     } 
		//   });
		// }
		$.ajax({
			type: "get", //data 传送数据类型。post 传递
			dataType: 'json', // 返回数据的数据类型json
			url: defaultUrl + "/controller/getGroupBrand", // yii 控制器/方法
			cache: false,
			// data: params,  //传送的数据     
			error: function() {
				alert("数据传输错误");
			},
			success: function(data) {
				console.log(data);
				if(data.code != 1) {
					return false
				}
				shopHome.brandList = data.result;

			}
		});

		var dropMe;
		$(function() {

			// dropload
			$('.content').dropload({
				scrollArea: window,
				loadDownFn: function(me) {
					dropMe = me;
					shopHome.pageIndex++;
					var params = {
						'shopId': shopHome.shopId,
						'marketId': shopHome.marketId,
						'brandId': shopHome.brandId,
						'seriesId': shopHome.seriesId,
						'modelId': shopHome.modelId,
						'fromRetailPrice': shopHome.startPrice,
						'toRetailPrice': shopHome.endPrice,
						'carTypeId': shopHome.modelTpyeId,
						'orderColunm': shopHome.srotName,
						'orderMode': shopHome.srotMode,
						'pageSize': shopHome.pageSize,
						'pageIndex': shopHome.pageIndex,
						'carSaleState': '20',
					}
					$.ajax({
						type: "get", //data 传送数据类型。post 传递
						dataType: 'json', // 返回数据的数据类型json
						url: defaultUrl + "/controller/getCarList", // yii 控制器/方法
						cache: false,
						data: params, //传送的数据     
						error: function() {
							alert("数据传输错误");
							me.noData();
							me.lock();
							// me.resetload();
						},
						success: function(data) {
							// setTimeout(function(){
							if(data.code != 1) {
								return false
								me.resetload();
							}
							var arr = data.result
							if(arr.length > 0) {
								for(var i = 0; i < arr.length; i++) {
									shopHome.carList.push(arr[i])
								}
								me.resetload();
							} else {
								// 锁定
								me.lock();
								// 无数据
								me.noData();
								me.resetload();
							}

							// },500);

						}
					});
					$.ajax({
						type: "get", //data 传送数据类型。post 传递
						dataType: 'json', // 返回数据的数据类型json
						url: defaultUrl + "/controller/getCarNum", // yii 控制器/方法
						cache: false,
						data: params, //传送的数据     
						error: function() {
							alert("数据传输错误");
						},
						success: function(data) {
							console.log(data);
							if(data.code != 1) {
								return false
							}
							shopHome.carsTotal = data.result.total;

						}
					});
				}
			});
		});
	</script>

</html>